<template>
  <div class="category-list-container">
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6">
      <div 
        v-for="category in categories" 
        :key="category.categoryId"
        class="category-item group cursor-pointer transition-all duration-300 hover:scale-105"
        @click="handleCategoryClick(category)"
      >
        <div class="category-image-wrapper relative overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800 aspect-[144/89]">
          <CustomImage
            :src="category.bannerPath"
            :alt="category.title"
            img-class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
            type="category"
            :category-title="category.title"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </div>
        <h3 class="category-title mt-3 text-center text-sm font-medium text-gray-800 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
          {{ category.title }}
        </h3>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ToolTab } from '~/types/tools'

interface Props {
  categories: ToolTab[]
}

defineProps<Props>()

/**
 * 图片相关功能现在由LazyImage组件内部处理
 * 包括默认图片生成、错误处理、懒加载等
 */

/**
 * 处理分类点击事件
 * @param category 分类项
 */
const handleCategoryClick = (category: ToolTab) => {
  navigateTo(`/tools/${category.categoryId}`)
}
/**
 * 懒加载现在由LazyImage组件内部处理
 * 无需在父组件中手动初始化
 */
</script>

<style scoped>
.category-list-container {
  padding: 20px 0;
}

.category-item {
  background: var(--bg-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow-light);
  transition: all 0.3s ease;
}

.category-item:hover {
  box-shadow: 0 8px 25px var(--shadow-color);
}

.category-image-wrapper {
  position: relative;
  overflow: hidden;
}

.category-title {
  padding: 0 8px 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 40px;
  color: var(--text-color);
}

/* 响应式设计 */
@media (max-width: 640px) {
  .category-list-container {
    padding: 15px 0;
  }
  
  .grid {
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .grid {
    gap: 24px;
  }
}
</style>